
<template>
  <el-card>
    <div>
      <el-row @click="serchShow = !serchShow"
              style="height: 45px;border: 1px solid #dedede;display: flex; justify-content: space-between;">
        <span style="line-height: 45px;text-indent: 2em;">查询条件</span>
        <span style="line-height: 45px;margin-right: 10px" v-if="!serchShow">展开更多条件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><ArrowLeft/></el-icon></span>
        <span style="line-height: 45px;margin-right: 10px" v-if="serchShow">收回&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><ArrowUp/></el-icon></span>
      </el-row>
      <el-form class="search-form" style="margin-top: 20px">
        <el-form-item label-width="100px" label="商品名称:" size="default">
          <el-input v-model="productName" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px"  label="成本:" size="default">
          <el-input v-model="cost" placeholder="请输入成本" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px"  label="售价:" size="default">
          <el-input v-model="price" placeholder="请输入售价" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px"  label="种类:" size="default">
          <el-select style="width: 100%" v-model="category" placeholder="请选择类型" clearable>
            <el-option
                v-for="item in categoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="serchShow" label-width="100px"  label="是否团购:" size="default">
          <el-select style="width: 100%" v-model="isGroup" placeholder="是否团购" clearable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" v-show="serchShow" label="生产日期:" size="default">
          <el-input v-model="productionDate" placeholder="生产日期" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px" v-show="serchShow" label="保质期:" size="default">
          <el-input v-model="shelfLife" placeholder="保质期" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px" v-show="serchShow" label="品牌名:" size="default">
          <el-input v-model="brandName" placeholder="品牌名" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px" v-show="serchShow" label="供应商:" size="default">
          <el-input v-model="supplierName" placeholder="供应商" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px"  v-show="serchShow"   label="状态:" size="default">
          <el-select style="width: 100%" v-model="prouuctStatus" placeholder="请选择状态" clearable>
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁止" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="all-search">
        <el-button type="primary" size="mini" class="btn-background-color-search" @click="queryBtn">
          查询
        </el-button>
        <el-button type="primary" size="mini" class="btn-background-color-reset" @click="reset">重置
        </el-button>
      </div>
      <div class="all-add">
        <el-button round type="success" size="mini" class="btn-background-color-add" @click="addUserDialog">
          新增
        </el-button>
      </div>
      <el-table :row-style="{height: '30px'}" :data="dataList"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{textAlign: 'center',background:'#d1c9c9'}" border
                style="width: 100%" size="small" max-height="400">
        <el-table-column fixed prop="productName" label="商品名称" min-width="80" show-overflow-tooltip="true"/>
        <el-table-column prop="brandName" label="品牌名称" min-width="80" show-overflow-tooltip="true"/>
        <el-table-column prop="price" label="单价" min-width="80" show-overflow-tooltip="true"/>
        <el-table-column prop="cost" label="成本" min-width="40" show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="productCount" label="余额" min-width="40" show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="isGroup" label="是否团购" min-width="100" show-overflow-tooltip="true">
          <template #default="scope">
              <span   v-if="scope.row.isGroup == 1 ">
               是
              </span>
              <span  v-if="scope.row.isGroup != 1 " >
               否
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="100" show-overflow-tooltip="true"/>
        <el-table-column prop="supplierName" label="供应商" min-width="70" show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="productionDate" label="生产日期" min-width="50" show-overflow-tooltip="true"/>
        <el-table-column prop="shelfLife" label="保质期" min-width="70" show-overflow-tooltip="true">
          <template #default="scope">
            <div v-if="scope.row.userLevel == 1 " style="display: flex; align-items: center">
              <el-icon color="#b1b0b1"><Tickets /></el-icon>
              <span style="margin-left: 10px">普通会员</span>
            </div>
            <div v-if="scope.row.userLevel == 2 " style="display: flex; align-items: center">
              <el-icon color="#af90af"><Memo /></el-icon>
              <span style="margin-left: 10px">青铜</span>
            </div>
            <div v-if="scope.row.userLevel == 3 " style="display: flex; align-items: center">
              <el-icon color="#ad69ad"><Document /></el-icon>
              <span style="margin-left: 10px">白银</span>
            </div>
            <div v-if="scope.row.userLevel == 4 " style="display: flex; align-items: center">
              <el-icon color="#ac42ac"><Document /></el-icon>
              <span style="margin-left: 10px">黄金</span>
            </div>
            <div v-if="scope.row.userLevel == 5 " style="display: flex; align-items: center">
              <el-icon color="#ac08ac"><Document /></el-icon>
              <span style="margin-left: 10px">钻石</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="prouuctStatus" label="状态" min-width="50" show-overflow-tooltip="true">
          <template #default="scope">
            <el-tooltip effect="dark" :content="'已审批'" placement="top">
              <el-icon color="#68f703"  v-if="scope.row.userStats == 1 " :size="15">
                <SuccessFilled/>
              </el-icon>
            </el-tooltip>
            <el-tooltip effect="dark" :content="'未审批'" placement="top">
              <el-icon color="#f87103"  v-if="scope.row.userStats != 1 " :size="15">
                <WarningFilled/>
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" min-width="100" show-overflow-tooltip="true"/>
        <el-table-column prop="updateTime" label="更新时间" min-width="100" show-overflow-tooltip="true"/>
        <el-table-column fixed="right" label="图片管理" width="90">
          <template #default="scope">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8888/api/file/upload"
                :data="{ type: 'proPic', id: scope.row.id }"
                :headers="{ token : UserStore.token  }"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <el-button class="btn-background-color-tupian"  size="small"  @click="">上传图片</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="170">
          <template #default="scope">
            <el-button  link type="primary" class="btn-background-color-xiangqing" size="small"
                        @click.stop="productDetails(scope.row)">详情
            </el-button>
            <el-button  link type="primary" class="btn-background-color-red" size="small"
                        @click.stop="DeleteByIdsubmit(scope.row)">删除
            </el-button>
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8888/api/file/upload"
                :data="{ type: 'product', id: scope.row.id }"
                :headers="{ token : UserStore.token  }"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <el-button class="btn-background-color-fengmian"  size="small"  @click="">封面</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-border">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:current-page="current"
            v-model:page-size="pageSize"
            v-model:total="total"
            :page-sizes="[5, 10, 20, 30,50,100]"
            small
            background
            layout="->,total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>
  </el-card>

  <el-dialog   v-model="AddIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
      <h1>新增商品</h1>
    </template>
    <el-form :model="registerForm"  ref="registerFormRef">
      <el-form-item label="商品名称" prop="productName">
        <el-input
            v-model="registerForm.productName"
            clearable
            placeholder="请您输入商品名称"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌品牌" prop="brandName">
        <el-input
            v-model="registerForm.brandName"
            clearable
            placeholder="请您输入品牌名称"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="成本" prop="cost">
        <el-input
            v-model="registerForm.cost"
            clearable
            placeholder="请您输入成本"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input
            v-model="registerForm.price"
            clearable
            placeholder="请您输入单价"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="100px"  label="种类:" size="default">
        <el-select style="width: 100%" v-model="registerForm.category" placeholder="请选择类型" clearable>
          <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label-width="100px"  label="是否团购:" size="default">
        <el-select style="width: 100%" v-model="registerForm.isGroup" placeholder="是否团购" clearable>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="保质期" prop="price">
        <el-input
            v-model="registerForm.shelfLife"
            clearable
            placeholder="请您输入保质期(天)"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="price">
        <el-input
            v-model="registerForm.productCount"
            clearable
            placeholder="请您输入库存"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="price">
        <el-input
            v-model="registerForm.description"
            clearable
            placeholder="请您输入商品描述"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="供应商" prop="price">
        <el-input
            v-model="registerForm.supplierName"
            clearable
            placeholder="请您输入供应商名称"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="生产日期" prop="price">
        <el-date-picker
            v-model="registerForm.productionDate"
            type="date"
            placeholder="选择生产日期"
            :size="size"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button color="red" type="primary" @click="Addsubmit">确认</el-button>
        <el-button @click="Addclose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Product1">
import {onMounted, reactive, ref} from "vue";
import {ElMessage, UploadProps} from "element-plus";
import useUserStore from "@/store/modules/user";
import {ResponseData} from "@/api/user/type";
import {reqAddProduct, reqdELETEProduct, reqProductList} from "@/api/product";
import {useRouter} from "vue-router";
import {reqAddUser, reqDeleteUser} from "@/api/user";
const router = useRouter();

const serchShow = ref();
let productName =  ref();
let brandName =  ref();
let supplierName =  ref();
let cost =  ref();
let price =  ref();
let category =  ref();
let isGroup =  ref();
let productionDate =  ref();
let shelfLife =  ref();
let prouuctStatus =  ref();
let UserStore = useUserStore();
let current = ref(1);
let pageSize = ref(10);
const dataList = ref([]);
let total = ref(0);
const handleAvatarSuccess: UploadProps['onSuccess'] = () => {
  ElMessage.success('上传成功!')
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (!(rawFile.type == 'image/jpg'||rawFile.type == 'image/jpeg'||rawFile.type == 'image/svg'||rawFile.type == 'image/png'||rawFile.type == 'image/webp')) {
    ElMessage.error('图片必须是（jpg/jpeg/svg/png/webp）中任意的格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
const categoryList = [
  {
    value: '水果',
    label: '水果',
  },
  {
    value: '主食',
    label: '主食',
  },
  {
    value: '零食',
    label: '零食',
  },
  {
    value: '蔬菜',
    label: '蔬菜',
  },
  {
    value: '海鲜',
    label: '海鲜',
  },
  {
    value: '饮料',
    label: '饮料',
  },
  {
    value: '乳制品',
    label: '乳制品',
  },
  {
    value: '肉类',
    label: '肉类',
  },
  {
    value: '调味品',
    label: '调味品',
  },
  {
    value: '冷冻食品',
    label: '冷冻食品',
  },
  {
    value: '糕点',
    label: '糕点',
  },
  {
    value: '罐头食品',
    label: '罐头食品',
  },
  {
    value: '坚果',
    label: '坚果',
  },
  {
    value: '谷物',
    label: '谷物',
  },
  {
    value: '甜品',
    label: '甜品',
  },
  {
    value: '香料',
    label: '香料',
  },
  {
    value: '禽类',
    label: '禽类',
  },
  {
    value: '饮品',
    label: '饮品',
  },
  {
    value: '有机食品',
    label: '有机食品',
  },
  {
    value: '谷类食品',
    label: '谷类食品',
  },
  {
    value: '果酱',
    label: '果酱',
  },
  {
    value: '腌制食品',
    label: '腌制食品',
  },
  {
    value: '巧克力',
    label: '巧克力',
  },
  {
    value: '大豆制品',
    label: '大豆制品',
  },
  {
    value: '酱料',
    label: '酱料',
  },
  {
    value: '甜点',
    label: '甜点',
  },
  {
    value: '谷类食品',
    label: '谷类食品',
  },
  {
    value: '食用油',
    label: '食用油',
  },
  {
    value: '醋',
    label: '醋',
  },
  {
    value: '烘焙食材',
    label: '烘焙食材',
  },
  {
    value: '蘸料',
    label: '蘸料',
  },
  {
    value: '草药',
    label: '草药',
  },
  {
    value: '其他',
    label: '其他',
  }
]
const queryBtn = (async () => {
  let merchantId = UserStore.id;
  if(UserStore.userType == "admin"){
    merchantId = null ;
  }
  let userQueryRequest =
      {
        brandName: brandName.value ? brandName.value : null,
        category: category.value ? category.value : null,
        cost: cost.value ? Number(cost.value) : null,
        isGroup: isGroup.value ? Number(isGroup.value) : null,
        price: price.value ? Number(price.value) : null,
        productName: productName.value ? productName.value : null,
        productionDate: productionDate.value ? productionDate.value : null,
        shelfLife: shelfLife.value ? Number(shelfLife.value) : null,
        supplierName: supplierName.value ? supplierName.value : null,
        current: current.value ? Number(current.value) : null,
        pageSize: pageSize.value ? Number(pageSize.value) : null,
        merchantId: merchantId
      };
  let res: ResponseData = await reqProductList(userQueryRequest);
  let data = res.data;
  if (res.data.records) {
    dataList.value = data.records;
    total.value = Number(data.total);
    current.value = Number(data.current);
    pageSize.value = Number(data.size);
  } else {
    ElMessage.error("请求数据为空...");
  }
})
const productDetails = (item: any) => {
  router.push({
    name: 'productDetails',
    query: {
      row: item.id
    }
  });
}
const DeleteByIdsubmit = ( async (item : any) => {
  let res = await reqdELETEProduct({id:item.id});
  if(res.data == true){
    ElMessage.success("删除成功");
    queryBtn();
  }
})
const reset = (() => {
  productName.value =  null;
  cost.value =  null;
  price.value =  null;
  category.value = null;
  isGroup.value =  null;
  productionDate.value =  null;
  shelfLife.value =  null;
  prouuctStatus.value =  null
  brandName.value =  null
  supplierName.value =  null
})
const handleSizeChange = ((val: any) => {
  pageSize.value = val;
  queryBtn();
})
const handleCurrentChange = ((val: any) => {
  current.value = val;
  queryBtn();
})
const registerForm = reactive({
  brandName: "",
  category: "",
  cost:"",
  description:"",
  isGroup:"",
  merchantId: UserStore.id,
  price:"",
  productName:"",
  productionDate:"",
  shelfLife:"",
  picUrl:"src/assets/file/product/生猪肉.jpg",
  supplierName:"",
  productCount : ""
});
const AddIsShowDialog = ref(false);
const addUserDialog = (() =>{
  AddIsShowDialog.value = true;
})
const Addsubmit = ( async () => {
      let res : ResponseData= await reqAddProduct(registerForm);
      if (res.code === 0) {
        AddIsShowDialog.value = false;
        ElMessage.success("新增成功");
        queryBtn();
      } else {
        //提示信息添加失败
        ElMessage.error(res.message);
      }
})
const Addclose = () => {
  AddIsShowDialog.value = false;
}
onMounted(() => {
  queryBtn();
})
</script>


<style scoped lang="scss">
.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 90%;
}
.search-form .el-form-item {
  width: calc(100% / 4);
  padding-right: 10px;
  box-sizing: border-box;
}
.all-search {
  padding-top: 5px;
  display: flex;
  justify-content: flex-end;
}
.btn-background-color-search {
  background-color: #00a6ff;
  color: white;
}
.btn-background-color-reset {
  background-color: #29958d;
  color: white;
}
.pagination-border {
  padding-top: 8px;
  padding-right: 20px;
  height: 40px;
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
}
.btn-background-color-red {
  background-color: #f80317;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-xiangqing {
  background-color: #afa681;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-fengmian{
  background-color: #eec20a;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-tupian{
  background-color: #7ea265;
  color: white;
  height: 22px;
  float: left;
}
</style>